export const useSettingStore = defineStore(
  Store.Setting,
  () => {
    const dark = ref(false);
    const theme = computed(() => (dark.value ? darkTheme : lightTheme));
    function toggleDark() {
      dark.value = !dark.value;
    }

    const lang = ref("zhCN");
    const locale = computed(() => getNaiveLocale(lang.value));
    const dateLocale = computed(() => getNaiveDateLocale(lang.value));
    function setLang(value: string) {
      lang.value = value;
    }

    const sidebar = reactive<Record<string, SettingStore.Sidebar>>({
      layout: { width: 300, collapsed: false },
    });

    return {
      dark,
      theme,
      toggleDark,
      lang,
      locale,
      dateLocale,
      setLang,
      sidebar,
    };
  },
  {
    persist: {
      pick: ["dark", "lang", "sidebar"],
    },
  }
);
